<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>iconfont</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/html5shiv.js"></script>
    <script src="../js/respondjs.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        .tgClass {
            font-size: 32px;
            color: red;
        }

        .glyphicon {
            color: red;
        }
    </style>
    <script>
        $(function () {
            let icon = $(".iconfont");
            icon.click(function () {
                $(this).toggleClass("tgClass");
            });
            $(".glyphicon").click(function () {
                $(this).removeClass("glyphicon-download").addClass("glyphicon-upload").css("color", "green");
            })
        })
    </script>
</head>
<body>
<div>
    <span class="iconfont">&#xe69a;</span>
    <span class="iconfont">&#xe601;</span>
    <span class="iconfont">&#xe608;</span>
    <span class="iconfont">&#xe602;</span>
    <span class="glyphicon  glyphicon-download"></span>
    <span class="glyphicon  glyphicon-upload"></span>
</div>
</body>
</html>
